<template>
    <div>
        <el-tree
            :data="data"
            ref="tree"
            show-checkbox
            node-key="id"
            :check-on-click-node="true"
            :expand-on-click-node="false"
            :default-expanded-keys="[]"
            :default-checked-keys="[]"
            :props="defaultProps"
            @node-click="treeHandleNodeClick"
            @check-change="treeCheckChange"
        >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span
                    v-if="editNode.isEdit && editNode.id == data.id"
                    class="custom-tree-ctain custom-tree-edit"
                >
                    <el-input
                        style="width: 120px;"
                        size="mini"
                        ref="editTreeInput"
                        v-model="editNode.label"
                        @blur="editTreeInputBlur"
                    >
                    </el-input>

                    <span>
                        <el-button 
                            type="text" 
                            size="mini" 
                            @click="editTreeOk"
                        >
                            <i class="el-tree-icon el-icon-circle-check" title="确认"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="editTreeCancel"
                        >
                            <i class="el-tree-icon el-icon-circle-close" title="取消"></i>
                        </el-button>
                    </span>
                </span>

                <span v-else class="custom-tree-ctain custom-tree-show">
                    <span>{{ data.label }}</span>
                    <span>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => editTreeNode(node,data)"
                        >
                            <i class="el-tree-icon el-icon-edit-outline" title="编辑"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => appendTreeNode(data)"
                        >
                            <i class="el-tree-icon el-icon-plus" title="新增"></i>
                        </el-button>
                        <el-button
                            type="text"
                            size="mini"
                            @click="() => removeTreeNode(node, data)"
                        >
                            <i class="el-tree-icon el-icon-delete" title="删除"></i>
                        </el-button>
                    </span>
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
let id = 1000;
export default {
    data() {
        return {
            selectTreeName: "",
            selectTree: "",
            editNode: {
                isEdit: false,
                id: "",
                label: "",
                children: [],
            },
            data: [
                {
                    id: 1,
                    label: "一级 1",
                    children: [
                        {
                            id: 4,
                            label: "二级 1-1",
                            children: [
                                {
                                    id: 9,
                                    label: "三级 1-1-1",
                                },
                                {
                                    id: 10,
                                    label: "三级 1-1-2",
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    label: "一级 2",
                    children: [
                        {
                            id: 5,
                            label: "二级 2-1",
                        },
                        {
                            id: 6,
                            label: "二级 2-2",
                        },
                    ],
                },
                {
                    id: 3,
                    label: "一级 3",
                    children: [
                        {
                            id: 7,
                            label: "二级 3-1",
                        },
                        {
                            id: 8,
                            label: "二级 3-2",
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children",
                label: "label",
            },
        };
    },
    methods: {
        getCheckedNodes(e) {
            console.log(e);
        },
        treeHandleNodeClick(e) {
            //console.log(e);
            this.selectTreeName = e.label;
        },
        treeCheckChange(data, node, item) {
            let nodes = this.$refs.tree.getCheckedNodes();
            let keys = this.$refs.tree.getCheckedKeys();
            console.log(nodes);
            console.log(keys);
            // console.log(data);
            // console.log(node);
            // console.log(item);
        },
        appendTreeNode(data) {
            const newChild = { id: id++, label: "testtest", children: [] };
            if (!data.children) {
                this.$set(data, "children", []);
            }
            data.children.push(newChild);
            window.event.stopPropagation();
        },
        removeTreeNode(node, data) {
            window.event.stopPropagation();
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex((d) => d.id === data.id);
                children.splice(index, 1);
                
                this.$message({
                    type: "success",
                    message: "删除成功!",
                });
            })
            .catch(() => {
                //取消删除
            });
          
        },
        editTreeNode(node, data) {
            this.editNode.id = data.id;
            this.editNode.label = data.label;
            this.editNode.children = data.children || '';
            this.editNode.isEdit = true;
            this.$nextTick(() => {
                this.$refs.editTreeInput.focus();
            });
            window.event.stopPropagation();
        },
        editTreeOk() {
            console.log(this.editNode);
            window.event.stopPropagation();
        },
        editTreeCancel() {
            this.editNode = {
                isEdit: false,
                id: "",
                label: "",
                children: [],
            };
            window.event.stopPropagation();
        },
        editTreeInputBlur() {},
    },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;

    .custom-tree-ctain {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
    }

    .el-tree-icon{
        font-size: 16px;
        font-weight: bolder;
    }

    ::v-deep .el-input__inner{
        height: 26px;
        line-height: 26px;
    }
}
</style>
